<template>
	<view class="content">
		<view class="card" v-for="(item,index) in musicList" :key="index" @click="selectMusic(index)">
			<text>{{item.substring(0, item.indexOf('.'))}}</text>
			<view v-if="selectedMusic == index">
				<!-- https://xch.jseihc.com/public/platform/userApp/static/image/gif/audio.gif -->
				<image class="audio" :src="staticUrl + '/image/gif/audio.gif'" mode=""></image>
			</view>
			<image class="gou" v-if="selectedMusic == index" :src="staticUrl + '/image/mine/bgm/gou.png'" mode=""></image>
		</view>
		<view style="width: 750rpx;height: 50rpx;"></view>
	</view>
</template>

<script>
	const app = getApp();
	import * as api from '@/api/login';
	export default {
		data() {
			return {
				staticUrl:this.$config.StaticUrl,
				musicList:[],
				selectedMusic:0,
				innerAudioContext: null,
			}
		},
		onLoad() {
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = false;
			this.innerAudioContext.loop = false;  
			// this.innerAudioContext.startTime = 30;
			this.getMusicList();
			// 读取缓存，找到已经选择的音频
			// let music = uni.getStorageSync("backgroundMusic");
		},
		onUnload() {
			// 销毁音乐实例
			console.log('销毁');
			this.innerAudioContext.destroy();
		},
		methods: {
			playAudio(src){
				this.innerAudioContext.stop();
				let musicSrc = src;
				if(app.globalData.platform == "ios") {
					musicSrc = encodeURIComponent(src)
				}
				// 定义一个音频
				this.innerAudioContext.src = this.staticUrl + '/audio/fastMonitor/' + musicSrc;
				this.innerAudioContext.play();
			},
			// 获取音乐列表
			getMusicList(){
				let that = this;
				let data = {
					action: 'getMusicList'
				};
				api.getMusicList(data).then(function(res) {
						console.log(res);
						if(res.data.code !== 2000) return;
						that.musicList = res.data.data.musicList;
						let choiceMusic = uni.getStorageSync("backgroundMusic");
						if(choiceMusic != 'undefined'){
							res.data.data.musicList.forEach((item,index) => {
								if(item === choiceMusic){
									that.selectedMusic = index;
								}
							});
							that.playAudio(choiceMusic);
						}
					}).catch(function(error) {
						console.log('getMusicList fail', error);
				});
			},
			selectMusic(flag){
				this.selectedMusic = flag;
				let backgroundMusic = this.musicList[this.selectedMusic];
				// 将选中的音乐写入缓存中
				uni.setStorageSync('backgroundMusic',backgroundMusic);
				this.playAudio(backgroundMusic);
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFAFA;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.card {
		margin-top: 32rpx;
		width: 700rpx;
		height: 120rpx;
		background-color: #FFFFFF;
		border-radius: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
		
	text{
		font-size: 38rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #000000;
		margin-left: 54rpx;
	}
	.audio {
		width: 200rpx;
		height: 90rpx;
	}
	.gou{
		margin-right: 48rpx;
		width: 35rpx;
		height: 25rpx;
	}
</style>
